<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport"/>
    <title>demo</title>
    <link href="${base}/components/element-plus/css/index.css" rel="stylesheet">
    <link href="${base}/css/loading.css" rel="stylesheet">
</head>
<body>
<!-- loading  start -->
<div id="loader">
    <div class="rotate-loading"></div>
    <b> 页面数据加载中 。。。</b>
</div>
<!-- loading end -->
<div id="app" un-cloak>
    <div class="p3 text-2xl text-center">{{message}} &nbsp;&nbsp;---->>&nbsp;&nbsp; {{count}}</div>
    <div class="p3">
        <el-card>
            <template #header>
                element-plus 展示
            </template>
            <div class="mb-4">
                <el-button>Default</el-button>
                <el-button type="primary">Primary</el-button>
                <el-button type="success">Success</el-button>
                <el-button type="info">Info</el-button>
                <el-button type="warning">Warning</el-button>
                <el-button type="danger">Danger</el-button>
            </div>

            <div class="p3">
                <el-button circle>
                    <el-icon>
                        <Search/>
                    </el-icon>
                </el-button>
                <el-button type="primary" circle>
                    <el-icon>
                        <Edit/>
                    </el-icon>
                </el-button>
                <el-button type="success" circle>
                    <el-icon>
                        <Check/>
                    </el-icon>
                </el-button>
                <el-button type="info" circle>
                    <el-icon>
                        <Message/>
                    </el-icon>
                </el-button>
                <el-button type="warning" circle>
                    <el-icon>
                        <Star/>
                    </el-icon>
                </el-button>
                <el-button type="danger">
                    <el-icon class="mr1">
                        <Delete/>
                    </el-icon>
                    删除
                </el-button>
            </div>
        </el-card>
    </div>
</div>
</body>

<#-- freemarker 服务端变量获取 -->
<script type="application/javascript">
    var base = "${base}";
    var user = "${user}";
    console.log(base);
    console.log(user);

    function onloadRun() {
        // loading 隐藏
        window.onload = function() {
            // 页面加载后执行的代码
            let elementId = document.getElementById("loader");
            if (elementId) {
                elementId.style.display = "none";
            }
        };
    }
</script>

<#-- unocss 原子样式 https://unocss.jiangruyi.com -->
<script src="${base}/components/unocss/runtime.js"></script>

<#-- vue3 https://cn.vuejs.org -->
<script src="${base}/components/vue3/index.js"></script>

<#-- element-plus https://element-plus.org/zh-CN -->
<script src="${base}/components/element-plus/index.js"></script>

<#-- element-plus 图标 -->
<script src="${base}/components/element-plus/icons.js"></script>

<#-- element-plus 国际化修改为中文 -->
<script src="${base}/components/element-plus/zh_cn.js"></script>

<#-- 使用vue3 模板语法加载页面样例 -->
<script type="module">
    const {createApp, ref, reactive} = Vue;
    onloadRun();
    const app = createApp({
        setup() {
            const count = ref(1);
            const message = reactive("测试");
            return {
                message,
                count
            };
        }
    })
    // 引入ElementPlus组件
    app.use(ElementPlus, {
        locale: ElementPlusLocaleZhCn
    });
    // 引入ElementPlus图标
    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component);
    }
    app.mount("#app")
</script>
</html>